<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://microformats.org/profile/hcalendar">
        
        <title>Google Streetview with microformats - Google maps jQuery plugin</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, Google Streetview, Geo search" />
		<meta name="description" content="An example with jQuery, Google Streetview, Google Geo search and microformats using Google maps jQuery plugin" />
		<meta http-equiv="content-language" content="en" />
		
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Example with Google Streetview with microformats - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;Google Streetview;Geo search" />
		<meta name="DC.description" content="An example with jQuery, Google Streetview, Google Geo search and microformats using Google maps jQuery plugin" />
		<meta name="DC.creator" content="Johan S&auml;ll Larsson" />
		<meta name="DC.language" content="en" />
		
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>        
        <script type="text/javascript">
			google.load("maps", "3", {'other_params':'sensor=false'});
			google.load("jquery", "1.5");
			google.load("jqueryui", "1.8.9");
		</script>
        <script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
		<script type="text/javascript" src="../ui/jquery.ui.gmap.microformat.js"></script>
		
		<script src="../thirdparty/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
      	<script src="../thirdparty/SyntaxHighlighter/shAutoloader.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushJScript.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushXml.js" type="text/javascript"></script>
        <script type="text/javascript">
		//<![CDATA[
			$(function() {
				
				// Only for code formatting
				SyntaxHighlighter.all();
				
				$('#map_canvas').gmap({'callback': function(map) {
					$('#map_canvas').gmap('loadMetadata', 'microformat', 'vevent', function(index, item, data) {
							var clone = $(item).clone().addClass('ui-dialog-vevent').append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
							$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': new google.maps.LatLng(data.latitude.title, data.longitude.title), 'title': data.summary.text, 'icon':new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/music-rock.png') }, function(map, marker) {
								$(item).find('.summary').click( function() {
									$(marker).triggerEvent('click');
									return false;
								}); 
							}).click(function() {
								map.panTo( $(this).get(0).getPosition());
								$(clone).dialog({ 'modal': true, 'width': 530, 'title': data.summary.text, 'resizable': false, 'draggable': false });
								$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 'position': $(this).get(0).getPosition() });
							});
						}
					);
				}});
				
            });
		//]]>
		</script>
        
	</head>
    <body>
	
		<div id="doc">
		
			<div id="hd">
				<h1><a href="/">Google maps jQuery plugin</a> microformats example</h1>
			</div>
		
			<div class="item gradient ui-corner-all shadow-all">
                <div id="map_canvas"></div>
            </div>
		
			<div id="events">
				<h3>April 2011</h3>
				<ul class="v-list">
					<li>
						<div class="vevent">
							<span class="datetime">
								<abbr title="2011-04-11" class="dtstart">Monday April 11, 2011</abbr>
							</span>
							<span class="summary">jQuery UI Google maps plugin release version 2.0</span> at
							<span class="location vcard">  
								<span class="fn org"><a href="/">Google code</a></span>
								<span class="address adr">
									<span class="street-address">Angered</span>
									<span class="locality">G&ouml;teborg</span>, <span class="region">G&ouml;teborg</span>
									<span class="geo hidden">
										<abbr title="57.7973333" class="latitude">57.7973333</abbr> 
										<abbr title="12.0502107" class="longitude">12.0502107</abbr>
									</span>
								</span>
							</span>
							<div class="website">Website: <a class="url" href="/">http://jquery-ui-map.googlecode.com</a></div>
						</div>
					</li>
				</ul>
				<h3>August 2010</h3>
				<ul class="v-list">
					<li>
						<div class="vevent">
							<span class="dtstart">
								<span class="value">Saturday August 19, 2010</span> at <span class="value">19:00</span>
							 </span>
							 <span class="summary">Microformats + Activity Streams Meetup San Francisco</span> at 
							 <span class="location vcard">
								<span class="fn org">Westfield Food Court</span>, 
								<span class="adr">
									<span class="locality">San Francisco</span>, 
									<span class="region">California</span>.
								</span>
								<span class="geo hidden">
									<abbr class="latitude" title="37.7749295">37.7749295</abbr> 
									<abbr class="longitude" title="-122.4194155">-122.4194155</abbr>
								</span>
							</span> 
							<div class="website">Website: 
								<a class="url" href="http://microformats.org/wiki/events/2010-08-19-dinner-sf" rel="nofollow">http://microformats.org/wiki/events/2010-08-19-dinner-sf</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			<h2>Using jquery with Google maps</h2>
			<p>
				Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> and <a href="http://jqueryui.com/">jQuery UI 1.8.X or higher</a> or
				use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a> 
				<abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.
			</p>
			
			<div class="prettyprint">
				<pre class="brush: xml">
&lt;script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
			</div>
			
			<div class="prettyprint">
				<pre class="brush: js">
&lt;script type="text/javascript"&gt;
	$(function() {
		$('#map_canvas').gmap({'callback': function(map) {
			$('#map_canvas').gmap('loadMetadata', 'microformat', 'vevent', function(index, item, data) {
					var clone = $(item).clone().addClass('ui-dialog-vevent').append('&lt;div id="streetview{0}" class="streetview"&gt;&lt;/div&gt;'.replace('{0}', index));
					$('#map_canvas').gmap('addMarker', { 'bounds':true, 'position': new google.maps.LatLng(data.latitude.title, data.longitude.title), 'title': data.summary.text, 'icon':new google.maps.MarkerImage('http://google-maps-icons.googlecode.com/files/music-rock.png') }, function(map, marker) {
						$(item).find('.summary').click( function() {
							$(marker).triggerEvent('click');
							return false;
						}); 
					}).click(function() {
						map.panTo( $(this).get(0).getPosition());
						$(clone).dialog({ 'modal': true, 'width': 530, 'title': data.summary.text, 'resizable': false, 'draggable': false });
						$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), { 'position': $(this).get(0).getPosition() });
					});
				}
			);
		}});
	});
&lt;/script&gt;</pre>
			</div>
			
			<h2>More Google maps and jQuery examples</h2>
			<ul>
				<li><a href="jquery-mobile-example.html">Google maps with jQuery mobile example</a></li>
				<li><a href="other-examples.html">Click and drag events with Google geo search example</a></li>
				<li><a href="load JSON example.html">Import markers with JSON example</a></li>
				<li><a href="load Microformat example.html">Import markers with microformats example</a></li>
				<li><a href="load RDFa example.html">Import markers with RDFa example</a></li>
				<li><a href="load Microdata example.html">Import markers with microdata example</a></li>
				<li><a href="load Fusion.html">Import markers with Google Fusion tables</a></li>
				<li><a href="multiple maps example.html">Multiple maps on a single page example</a></li>
				<li><a href="basic-example.html">Google maps and jQuery example</a></li>
				<li><a href="google-maps-jquery-filtering.html">Filter markers example</a></li>
				<li><a href="google-maps-jquery-markerclusterer.html">Marker Clusterer Utility</a></li>
			</ul>
			
			<div id="ft" class="hidden">
				Author: 
				<div id="hcard-Johan-Säll-Larsson" class="vcard">
					<span class="fn n">
						<span class="given-name">Johan</span> 
						<span class="family-name">S&auml;ll Larsson</span>
					</span>
					<span class="adr">
						<span class="locality">G&ouml;teborg</span>,
						<span class="country-name">Sweden</span>
					</span>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			try {
				var pageTracker = _gat._getTracker("UA-17614686-3");
				pageTracker._trackPageview();
			} catch(err) {}
		</script>
    </body>
</html>



      